<template>
	<view>
		<scroll-view scroll-y>
			<view class="cu-bar bg-white solid-bottom" :class="isCard?'margin-top':''">
				<view class="action">
					<text class="cuIcon-titles text-orange "></text> 动态类卡片
				</view>
				<view class="action">
					<switch :class="isCard?'checked':''" :checked="isCard?true:false" @change="IsCard"></switch>
				</view>
			</view>
			<view class="cu-card dynamic" :class="isCard?'no-card':''">
				<view class="cu-item shadow">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
							<view class="content flex-sub">
								<view>凯尔</view>
								<view class="text-gray text-sm flex justify-between">
									2019年12月3日
								</view>
							</view>
						</view>
					</view>
					<view class="text-content">
						折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
					</view>
					<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
						<view class="bg-img" :class="isCard?'':'only-img'" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"
						 v-for="(item,index) in isCard?9:1" :key="index">
						</view>
					</view>
					<view class="text-gray text-sm text-right padding">
						<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
						<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
						<text class="cuIcon-messagefill margin-lr-xs"></text> 30
					</view>
			
					<view class="cu-list menu-avatar comment solids-top">
						<view class="cu-item">
							<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
							<view class="content">
								<view class="text-grey">莫甘娜</view>
								<view class="text-gray text-content text-df">
									凯尔，你被自己的光芒变的盲目。
								</view>
								<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
									<view class="flex">
										<view>凯尔：</view>
										<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
									</view>
								</view>
								<view class="margin-top-sm flex justify-between">
									<view class="text-gray text-df">2018年12月4日</view>
									<view>
										<text class="cuIcon-appreciatefill text-red"></text>
										<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
									</view>
								</view>
							</view>
						</view>
			
						<view class="cu-item">
							<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
							<view class="content">
								<view class="text-grey">凯尔</view>
								<view class="text-gray text-content text-df">
									妹妹，如果不是为了飞翔，我们要这翅膀有什么用?
								</view>
								<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
									<view class="flex">
										<view>莫甘娜：</view>
										<view class="flex-sub">如果不能立足于大地，要这双脚又有何用?</view>
									</view>
								</view>
								<view class="margin-top-sm flex justify-between">
									<view class="text-gray text-df">2018年12月4日</view>
									<view>
										<text class="cuIcon-appreciate text-gray"></text>
										<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: false
			};
		},
		methods: {
			IsCard(e) {
				this.isCard = e.detail.value
			},
		}
	}
</script>

<style>
	.service-icon {
		width: 52px;
		height: 52px;
	}

	.service {
		border: 0.01px solid #eee;
	}

	.service-text-wrapper {
		position: relative;
	}

	.service-text {
		position: absolute;
		transform: translate(-50%, -50%);
		width: 100%;
		top: 50%;
		left: 50%;
	}
</style>